<template>
    <el-dialog v-model="isShow" :show-close="false" class="">
        <message ref="message"></message>
        <div class="dialog">
            <span class="title">{{title}}</span>
            <div class="chat">
                <div class="history" ref="history">
                    <template v-for="msg in msgArr">
                        <sysMsg v-if="msg.action=='join'" :msg="msg"></sysMsg>
                        <sendMsg v-if="msg.action=='send'" :msg="msg"></sendMsg>
                        <recvMsg v-if="msg.action=='recv'" :msg="msg"></recvMsg>
                    </template>
                </div>
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="input"></el-input>
                <div slot="footer" class="opers">
                    <el-button @click="close">关 闭</el-button>
                    <el-button type="primary" @click="send">发 送</el-button>
                </div>
            </div>
            <div class="contacts">
                <el-tree :data="users" :props="userProps" :empty-text="emptyTxt"></el-tree>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import Vue from 'vue';
    import Message from './message.vue';
    import SysMsg from './chat/sys_msg.vue';
    import SendMsg from './chat/send_msg.vue';
    import RecvMsg from './chat/recv_msg.vue';

    let socket;

    export default {
        data(){
            return {
                isShow: false,
                title: '聊天室',
                msgArr: [],
                input: '',
                contact: '',
                users: [],
                userProps: {
                    children: 'children',
                    label: 'label'
                },
                emptyTxt: '在线[0]'
            }
        },
        props: {
            showChat: {
                type: Boolean,
                default: false
            }
        },
        components: {
            Message, SysMsg, SendMsg, RecvMsg
        },
        methods: {
            send(){
                let input = this.input;
                if (!input) {
                    this.$refs.message.error({
                        message: '请输入聊天信息!'
                    });
                } else {
                    this.showMessage('send', ' 我 ', input, '2016-12-14 20:00:00');
                    socket.emit('chat', input);
                    this.input = "";
                }
            },
            close(){
                this.$parent.$parent.$emit('closeChat');
                socket.emit('quit');
            },
            showMessage(action, username, data, time) {
                this.msgArr.push({
                    action,
                    username,
                    data,
                    time
                });

                // 滚动最底端
                Vue.nextTick(() => {
                    let hisDiv = this.$refs.history;
                    let scroll = hisDiv.scrollHeight - hisDiv.clientHeight;
                    if (scroll > 0) {
                        hisDiv.scrollTop = scroll;
                    }
                })
            },
            genUserTree(data) {
                let children = [];
                let users = [{
                    label: '在线[' + data.chatCount + ']',
                    authKey: 0,
                    children: children
                }];
                Object.keys(data.chatUsers).forEach((key) => {
                    children.push({authKey: key, label: data.chatUsers[key]});
                });
                this.users = users;
            }
        },
        computed: {
            isShow () {
                return this.showChat;
            }
        },
        created(){
            socket = this.$store.state.socket;
            socket.on('join', (data) => {
                this.genUserTree(data);
                this.showMessage('join', data.user.name, null, '2016-12-14 20:00:00');
            })
                .on('quit', (data) => {
                    this.genUserTree(data);
                    this.showMessage('quit', data.user.name, null, '2016-12-14 20:00:00');
                })
                .on('chat', (data) => {
                    this.showMessage('recv', data.username, data.message, '2016-12-14 20:00:00');
                });
        },
        updated(){

        }
    }
</script>

<style scoped>
    .dialog {
        height: 382px;
    }

    .title {
        position: absolute;
        top: 1px;
    }

    .chat {
        width: 500px;
        height: 380px;
        margin-bottom: 20px;
        float: left;
    }

    .history {
        height: 250px;
        border: solid 1px #C0CCDA;
        border-radius: 5px;
        margin-bottom: 10px;
        overflow: auto;
    }

    .opers {
        text-align: right;
        margin: 10px 0;
    }

    .contacts {
        width: 120px;
        height: 335px;
        font-size: 10px;
        margin-left: 10px;
        border: solid 1px #dfdfdf;
        border-radius: 5px;
        float: left;
        overflow: auto;
    }
</style>